<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { selectProduct } from "@/api/productApi";
const router = useRouter();
//重置请求条件
function reset() {
  queryData.value = {
    productName: "",
    pageNum: 1,
    pageSize: 10
  };
}
onMounted(() => {
  selectProductData();
});
function selectData() {}

const tableData = ref();
//表格勾选触发
function handleSelect(selection, row) {
  // selection: 当前所有已选中的行数据
  // row: 当前被选中的行数据
  prodects.value = selection;
}
//查询产品
async function selectProductData() {
  let res = await selectProduct(queryData.value);
  if (res.code == 200) {
    total.value = res.data.total;
    tableData.value = res.data.data;
  }
}

//请求条件
const queryData = ref({
  productName: "",
  pageNum: 1,
  pageSize: 10
});
let total = ref();
function handleSelectAll(selection) {
  prodects.value = selection;
}
//选中的商品
const prodects = ref();

// 定义映射规则
const mappingRules = {
  // 目标属性: 源属性
  productName: "productName",
  productCover: "coverImage",
  productId: "id",
  productModel: "model"
};
// 通用映射函数
function mapData(source, rules) {
  return Object.keys(rules).reduce((acc, targetKey) => {
    const sourceKey = rules[targetKey];
    acc[targetKey] = source[sourceKey];
    return acc;
  }, {});
}
//保存 跳转到创建询价单页面
function toInquiry() {
  if (prodects.value) {
    const mappedData = prodects.value.map(item => mapData(item, mappingRules));
    router.push({
      path: "/inquiry/saleInquiry",
      query: { prodects: JSON.stringify(mappedData) }
    });
    prodects.value = {};
  } else {
    router.push({
      path: "/inquiry/saleInquiry",
      query: { prodects: JSON.stringify([]) }
    });
  }
}

function cancel() {
  prodects.value = {};
  router.push({ path: "/inquiry/saleInquiry" });
}
//改变分页
function handleCurrentPageChange(newPage) {
  queryData.value.pageNum = newPage;
  selectProductData();
}
function handlePageSizeChange(newSize) {
  queryData.value.pageSize = newSize;
  selectProductData();
}
</script>

<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>选择产品</span>
        </div>
      </template>
      <div>
        <el-input
          v-model="queryData.productName"
          style="width: 240px; margin-right: 8px"
          placeholder="请输入产品名称"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
            <!-- 使用自定义图标 -->
          </template></el-input
        >

        <el-button type="primary" @click="selectData">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
      <div style="margin-top: 20px">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="300"
          border
          row-key="productNumber"
          @select="handleSelect"
          @select-all="handleSelectAll"
        >
          <!-- 这个是一个全选的操作 -->
          <el-table-column
            label="全选"
            width="100"
            type="selection"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="序号"
            width="80"
            type="index"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="产品编码"
            width="100"
            prop="productNumber"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="coverImage"
            label="产品图片"
            width="120"
            header-align="center"
            align="center"
          >
            <template v-slot="{ row }">
              <el-image
                style="width: 50px; height: 50px"
                :src="row.coverImage"
                :fit="'fill'"
              />
            </template>
          </el-table-column>

          <el-table-column
            label="产品名称"
            prop="productName"
            width="100"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="productDrawingNumber"
            label="产品图号"
            width="100"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="产品材质"
            prop="material"
            width="100"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="件数"
            prop="stock"
            width="80"
            header-align="center"
            align="center"
          />

          <el-table-column
            label="预计重量(kg/件数)"
            width="80"
            prop="singleWeight"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="单价"
            width="80"
            prop="price"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="产品分类"
            prop="categoryName"
            width="80"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="仓库名称"
            width="100"
            header-align="center"
            align="center"
          />
        </el-table>
      </div>
    </el-card>
    <el-pagination
      v-model:page-size="queryData.pageSize"
      v-model:current-page="queryData.pageNum"
      size="small"
      background
      layout="total ,sizes,prev, pager,next, jumper, ->,"
      :total="total"
      :page-sizes="[10, 20, 30, 40]"
      style="float: right; margin-top: 20px"
      @update:current-page="handleCurrentPageChange"
      @update:page-size="handlePageSizeChange"
    />
    <div>
      <el-card style="margin-top: 50px">
        <el-button
          type="primary"
          style="width: 40%; margin-left: 50px"
          @click="toInquiry"
          >保存</el-button
        >
        <el-button type="primary" style="width: 40%" @click="cancel"
          >取消</el-button
        >
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
